<template>
        <div class="progress-bar">
        <div class="forget-item">
          <div class="progress-bar-one">
            <div class="line-num arrs">1</div>
            <div class="line-item-right"></div>
          </div>
          <div class="line-item-title">填写用户名</div>
        </div>
        <div class="forget-item">
          <div class="progress-bar-one">
            <div class="line-item-left"></div>
            <div class="line-num arrs">2</div>
            <div class="line-item-right"></div>
            <div class="line-item-title">验证身份</div>
          </div>
        </div>
        <div class="forget-item">
          <div class="progress-bar-one">
            <div class="line-item-left"></div>
            <div class="line-num arrs">3</div>
            <div class="line-item-right"></div>
            <div class="line-item-title">设置新密码</div>
          </div>
        </div>
        <div class="forget-item">
          <div class="progress-bar-one">
            <div class="line-item-left"></div>
            <div class="line-num arrs">4</div>
            <div class="line-item-title">完成</div>
          </div>
        </div>
      </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
.progress-bar {
  width: 100%;
  height: 82.6px;
  // background-color: aqua;
  display: flex;
  justify-content: center;
}
.progress-bar-one {
  width: 260px;
  height: 48px;
  // background-color: red;
  position: relative;
}
.line-num {
  width: 48px;
    height: 48px;
    border: 2px solid #e4e4e4;
    border-radius: 50%;
    line-height: 44px;
    font-size: 28px;
    color: #ccc;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background-color: #fff;
    text-align: center;
}
.forget-item {
  text-align: center;
}
.line-item-right {
  height: 2px;
  background-color: #e4e4e4;
  width: 50%;
  position: absolute;
  top: 23px;
  left: 50%;
}
.line-item-left {
  height: 2px;
  background-color: #e4e4e4;
  width: 50%;
  position: absolute;
  top: 23px;
  right: 50%;
}
.line-item-title {
  margin-top: 15px;
  color: #999;
}
</style>
